<template>
	<div class="view-category flex flex-direction-v">
		<div class="category-header flex">
			<div class="item-left text-one-line">
				<mt-button @click="goBack" class="back" icon="back" plain></mt-button>
			</div>
			<div class="item-middle flex-1">
				<h4 class="header-title">选择直播分类</h4>
			</div>
			<div class="item-right text-one-line">
			</div>
		</div>
		<mt-cell class="currentCategory-main" :title="currentCategory">
			✔
		</mt-cell>
		<div class="categoryList-main flex-1">
			<div class="cell-item" v-for="item,index in categoryListNotParent" :key="item.index" @click="changeLiveCategory(item)">
				<mt-cell :title="item.name"></mt-cell>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import util from '@/util/Util';
	import _liveService from '@/service/liveService';
	import _sessionUser from '@/util/SessionUser';

	export default {
		name: 'Category',
		data() {
			return {
				liveInfoMe: {},
				categoryListNotParent: [],
				categoryListConvent: {},
				currentCategory: '',
			}
		},
		mounted() {
			let vm = this;
			_sessionUser.loadPage({
				scope: vm,
				exp: vm.userInfo && vm.categoryList,
				success: async() => {
					let categoryId = '';
					await vm.getLiveInfo({
						'user_id': vm.userInfo.id,
						'page_number': 0,
						'page_size': 1,
						'callback': function(data) {
							vm.liveInfoMe = data[0];
						}
					});
					vm.categoryList.forEach(function(value, index) {
						// 不要主分类
						if(value.parent_id != 0) {
							vm.categoryListNotParent.push(value);
						}
						vm.categoryListConvent[value.id] = value.name;
					});
					categoryId = vm.liveInfoMe.category_id;
					vm.currentCategory = vm.categoryListConvent[categoryId];
				}
			});
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				categoryList: state => state.liveCategory.categoryList
			}),
		},
		watch: {},
		methods: {
			goBack() {
				let vm = this;
				util.goBack(vm);
			},
			// 更新用户直播分类
			async changeLiveCategory(row) {
				let vm = this;
				await vm.updateLiveInfo({
					'category_id': row.id,
					'user_id': vm.userInfo.id
				});
				vm.$router.replace({
					path: 'liveBefore',
					query: {
						'category_id': row.id,
					}
				});
			},
			// 获取在线的直播信息，is_live(1.离线;2.在线)
			getLiveInfo(param) {
				let vm = this
				let resultData
				let data
				if(!param) {
					return;
				}
				let res = _liveService.getLiveInfo({
					'user_id': param.user_id || '',
					'is_live': param.is_live || '',
					'page_number': param.page_number || 0,
					'page_size': param.page_size || 20,
					'success': function(response) {
						resultData = response.data;
						if(resultData.success) {
							data = response.data.data;
							param.callback(data);
						}
						console.log('获取在线的直播信息：' + resultData.message);
					}
				})
				return res
			},
			// 更新用户直播信息，让用户直播信息显示在线
			updateLiveInfo(param) {
				let vm = this
				let resultData
				let data
				if(!param) {
					return;
				}
				let res = _liveService.updateLiveInfo({
					'user_id': param.user_id || '',
					'name': param.name || '',
					'title': param.title || '',
					'room_id': param.room_id || '',
					'cover': param.cover || '',
					'viewing_number': param.viewing_number || '',
					'is_live': param.is_live || '',
					'category_id': param.category_id || '',
					'success': function(response) {
						resultData = response.data;
						if(resultData.success) {}
						console.log('更新用户直播信息：' + resultData.message);
					}
				})
				return res
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view-category {
		width: 100%;
		height: 100%;
		background-color: #f8f8f8;
		.category-header {
			height: 50px;
			padding: 10px 10px 5px;
			line-height: 28px;
			background-color: white;
			box-shadow: 0 1px 1px #dbdbdb;
			.item-left {
				width: 70px;
				.back {
					position: relative;
					width: 25px;
					padding: 0 0 10px 5px;
					text-align: left;
					color: #b1b1b1;
					border: none;
				}
			}
			.item-middle {
				padding: 0 5px;
				@include text-overflow(1);
				.header-title {
					font-weight: normal;
					text-align: center;
					color: #333333;
				}
			}
			.item-right {
				width: 70px;
				padding: 0;
			}
		}
		.currentCategory-main {
			margin-top: 2px;
		}
		.categoryList-main {
			margin-top: 8px;
			overflow: auto;
			.cell-item {
				border-bottom: 1px solid #eeeeee;
			}
		}
	}
</style>